<template>
  <el-scrollbar>
    <div class="post-editor">
      <el-card class="editor-card">
        <el-form ref="postForm" :model="postForm" label-width="100px" enctype="multipart/form-data">
          <!-- 标题输入 -->
          <el-form-item label="标题">
            <el-input v-model="postForm.title" placeholder="请输入标题（必填）" class="title-input" maxlength="30" show-word-limit />
            <el-divider class="input-divider"/>
          </el-form-item>


          <!-- 内容输入 -->
          <el-form-item label="内容">
            <el-input type="textarea" rows="8" resize="none" v-model="postForm.content" placeholder="请输入内容（必填）" />
          </el-form-item>

          <!-- 图片上传 -->
          <el-form-item label="图片">
            <el-upload action="#" list-type="picture-card" :on-change="handlePictureChange" :limit="countLimit"
              :on-remove="handlePictureRemove" :file-list="postForm.fileList" :auto-upload="false">
              <el-icon>
                <Plus />
              </el-icon>
            </el-upload>
          </el-form-item>

          <!-- 提交按钮 -->
          <el-form-item>
            <el-button type="primary" @click="submitPost">
              发布
            </el-button>
          </el-form-item>

        </el-form>
      </el-card>
    </div>
  </el-scrollbar>
</template>

<script>
import { ElCard, ElForm, ElFormItem, ElInput, ElUpload, ElButton, ElMessage,ElNotification, ElLoading } from 'element-plus';
import axios from 'axios';
import {Plus} from '@element-plus/icons-vue';

export default {
  name: 'SomePostComponent',
  components: {
    ElCard,
    ElForm,
    ElFormItem,
    ElInput,
    ElUpload,
    ElButton,
    Plus
  },
  props: {
    clubId: {
      type: Number,
      required: true
    },
    countLimit:{
      type: Number,
      default: 3
    }
  },
  data() {
    return {
      postForm: {
        title: '',
        content: '',
        fileList: [], // 存储图片的文件列表
      },
    };
  },
  methods: {
    handlePictureChange(file, fileList) {
      // 处理图片上传逻辑
      this.postForm.fileList = fileList;
    },
    async submitPost() {
      // 提交发布逻辑
      if (!this.postForm.title || !this.postForm.content) {
        ElMessage.error('标题和内容不能为空！');
        return;
      }

      const isLoading = ElLoading.service({
        lock: true,
        text: '发布动态中...',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      
      const formData = new FormData();
      formData.append('clubId', this.clubId);
      formData.append('title', this.postForm.title);
      formData.append('content', this.postForm.content);

      this.postForm.fileList.forEach((file) => {
        formData.append('fileList', file.raw);
      });

      try {
        const response = await axios.post('/post/createPost', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        });

        if (response.data.code === 0) {
          ElMessage.success('发布成功！');

          // 重置表单
          this.$refs.postForm.resetFields();
          // 触发事件通知父组件
          this.$emit('post-created');

        } else {
          ElNotification({
            title: '动态发布失败',
            message: response.data.message||"未知错误",
            type: 'error',
            dangerouslyUseHTMLString: true,
          })
        }
      } catch (error) {

        console.error('Error submitting post:', error);
        if (error.response && error.response.data && error.response.data.message) {
          ElMessage.error(`发布失败：${error.response.data.message}`);
        } else {
          ElMessage.error('发布失败，请稍后重试');
        }
      }

      isLoading.close();
    },
  },
};
</script>

<style scoped>
.post-editor {
  width: 100%;
  margin: 30px auto;
  justify-content: center;
  /* padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
}

.editor-card {
  width: 100%;
}


.title-input{
  box-shadow: none;
  border-radius: 0;
  /* border-bottom: 1px solid rgba(0, 0, 0, 0.2); */
}

.el-divider{
  width: 100%;
  height: 1px;
  margin: auto auto;
  transition: all 0.3s ease;
  background-color: rgba(0, 0, 0, 0.2);;
}

.title-input:focus + .el-divider {
  height: 2px;
  background-color: #ffbbbb;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: none;
}

:deep(.el-input__wrapper:not(:hover)){
  box-shadow: none;
}

:deep(.el-input__wrapper:focus) {
  box-shadow: none;
}

:deep(.el-textarea__inner) {
  box-shadow: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
:deep(.el-textarea__inner:hover) {
  box-shadow: none;
}
:deep(.el-textarea__inner:focus) {
  box-shadow: none;
}

/* 根据需要添加更多样式 */
</style>
